/*
 * @Author: viivLgr
 * @Date: 2018-06-07 17:54:39
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 18:43:34
 */

import React from 'react';
import {Link}       from 'react-router-dom';

import PageTitle from 'component/page-title/index.jsx';
import TableList from 'util/tableList/index.jsx';

import Order from 'service/order-service.jsx';
import Util from 'util/util.jsx';

import './detail.scss';

const _order = new Order();
const _util = new Util();

class OrderDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            orderNo: this.props.match.params.id,
            orderInfo: {}
        }
    }
    componentDidMount() {
        this.loadDetail();
    }
    componentWillReceiveProps(nextProps) {
        let nextOrderId = nextProps.match.params.id;
        let orderNoChange = this.state.orderNo !== nextOrderId;
        if(orderNoChange){
            this.setState({
                orderNo: nextOrderId,
                orderInfo: {}
            }, () => {
                this.loadDetail();
            });
        }
    }
    // 加载详情
    loadDetail() {
        // 编辑功能，需要表单回填
        _order.getOrder(this.state.orderNo).then(res => {
            this.setState({
                orderInfo: res
            });
        }, errMsg => {
            _util.errorTips(errMsg);
        });
    }
    // 发货操作
    onSendGoods(e){
        if(window.confirm('确认发货？')){
            _order.sendGoods(this.state.orderNo).then(res => {
                _util.successTips(res);
                this.loadDetail();
            }, errMsg => {
                _util.errorTips(errMsg);
            });
        }
    }
    render() {
        let reveiverInfo = this.state.orderInfo.shippingVo || {};
        let productList = this.state.orderInfo.orderItemVoList || [];
        let tableHeaders = [
            { name: '商品图片', width: '10%' },
            { name: '商品信息', width: '45%' },
            { name: '单价', width: '15%' },
            { name: '数量', width: '15%' },
            { name: '合计', width: '15%' }
        ]
        return (
            <div id="page-wrapper">
                <PageTitle title="订单详情" />
                <div className="form-horizontal">
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单号</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.orderNo}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">创建时间</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.createTime}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">收件人</label>
                        <div className="col-md-10">
                            <p className="form-control-static">
                                {reveiverInfo.receiverName}，
                                {reveiverInfo.receiverProvince}
                                {reveiverInfo.receiverCity}
                                {reveiverInfo.receiverDistrict}
                                {reveiverInfo.receiverAddress}
                                （{reveiverInfo.receiverMobile || reveiverInfo.receiverPhone}）
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单状态</label>
                        <div className="col-md-5">
                            <p className="form-control-static">
                                {this.state.orderInfo.statusDesc}
                                {
                                    this.state.orderInfo.status === 20
                                    ? <button className="btn btn-sm btn-default btn-send-goods" 
                                        onClick={(e) => this.onSendGoods(e)}
                                        >立即发货</button>
                                    : null
                                }
                            </p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">支付方式</label>
                        <div className="col-md-5">
                            <p className="form-control-static">{this.state.orderInfo.paymentTypeDesc}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">订单金额</label>
                        <div className="col-md-5">
                            <p className="form-control-static">￥{this.state.orderInfo.payment}</p>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="col-md-2 control-label">商品列表</label>
                        <div className="col-md-10">
                            <TableList tableHeaders={tableHeaders}>
                                {
                                    productList.map((item, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>
                                                    <Link to={`/product/detail/${item.productId}`}>
                                                        <img 
                                                            className="p-img"
                                                            alt={item.productName}
                                                            src={`${this.state.orderInfo.imageHost}${item.productImage}`}/>
                                                    </Link>
                                                </td>
                                                <td>{item.productName}</td>
                                                <td>￥{item.currentUnitPrice}</td>
                                                <td>{item.quantity}</td>
                                                <td>￥{item.totalPrice}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </TableList>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default OrderDetail;